<template>
  <!-- 新增用户表 -->
  <el-dialog
    title="题目浏览"
    :visible.sync="dialogVisible"
    width="951.5px"
    center
  >
    <el-row :gutter="20">
      <el-col :span="6"
        ><div class="grid-content">
          【题型】:{{ example.questionType }}
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content">
          【编号】:{{ example.catalogID }}
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content">
          【难度】:{{ example.difficulty }}
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content">
          【标签】:{{ example.chkRemarks }}
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content">
          【学科】:{{ example.subjectName }}
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content">
          【目录】:{{ example.directoryName }}
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content">
          【方向】:{{ example.direction }}
        </div></el-col
      >
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button
        type="primary"
        @click="closeDialog()"
        addPerson
        style="padding: 3px 0; width: 74px; height: 36px; font-size: 14px"
        >关 闭</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'question_preview',
  props: { example: Object },
  data () {
    return {
      dialogVisible: false
    }
  },
  methods: {
    closeDialog () {
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped lang="less">
.box-card {
  width: 1681px;
  margin: 0 auto;
  padding: 20px;
  margin-top: 20px;
  .button_box {
    display: flex;
    width: 220px;
  }
  .el-input {
    width: 290px;
    height: 32px;
    padding: 0;
  }
  .addForm {
    .el-input {
      width: 280px;
      height: 36px;
    }
  }
  .el-button--default {
    width: 56px;
    height: 32px;
    margin: 0 0 0 15px;
  }
  .el-alert--info {
    margin-bottom: 20px;
  }
  .el-button--primary {
    width: 56px;
    height: 32px;
  }
  .el-button--success {
    width: 97px;
    height: 32px;
    font-size: 12px;
  }
  .text {
    font-size: 14px;
  }
  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: '';
  }
  .clearfix:after {
    clear: both;
  }
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
